<template>
    <div>
        <div class="">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item label="标题关键字">
                    <el-input v-model="searchParams.nameKeyword" placeholder="标题关键字" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchParams.status" placeholder="状态" style="width: 110px;">
                        <el-option label="全部" value="" />
                        <el-option label="未读" value="1" />
                        <el-option label="已读" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        
        <el-table :data="data" border style="width: 100%"
            :header-cell-style="{ background: '#f1f1f1' }" 
            :row-style="{ background: '#F8F8F8',color: '#000000'}"
        >
            <el-table-column header-align="center" align="center" type="index" :index="indexMethod" label="序号" width="80" />
            <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.key" :label="item.title" :formatter="item.formatter" align="center" />
            <el-table-column fixed="right" align="center" label="操作栏" width="120">
            <template #default="scope">
                <el-button link size="small" @click="edit(scope.row)">查看</el-button>
            </template>
            </el-table-column>
        </el-table>

        <div class="yangsf-m-t-20">
            <!-- <el-pagination background layout="prev, pager, next" :total="totalRow" @current-change="changPage"/> -->
             <el-pagination background 
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 50]"
                v-model:current-page="currentPage" 
                v-model:page-size="pageSize" 
                :total="totalRow"
                @size-change="changPageSize"
                @current-change="changPage"
                />
        </div>
    </div>

  <el-dialog v-model="isEdit"  width="70%">
    <div style="border: 1px solid #ccc;">
        <Editor
        :defaultConfig="editorConfig"
        :mode="mode"
        v-model="editItem.content"
        style="height: 500px; overflow-y: hidden;"
        />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isEdit = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import { ElMessage } from 'element-plus'
import { getMailboxs, getMailbox} from '@/config/api';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
let mode = "defualt";
 
// 编辑器配置
const toolbarConfig = {};
const editorConfig = { 
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'file',
            server: `/api/upload/localUpload`         
            // 注意 ${import.meta.env.VITE_BASE_URL} 写你自己的后端服务地址
        }
    }
};
 
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
 
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

//分页参数
const totalRow = ref(20)
const pageSize = ref(20)
const currentPage = ref(1)
const changPage = (e) => {
    currentPage.value = e
    getList()
}
const changPageSize = (e) => {
    currentPage.value = 1
    pageSize.value = e
    getList()
}
//处理序号
const indexMethod = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1
}

const data = ref([])
const columns = ref([
    {
        key: 'title',
        title: '标题',
        width: 200
    },
    {
        key: 'status',
        title: '状态',
        width: 80,
        formatter: (row) => {
            if(row.status == 1){
                return '未读'
            }
            else if(row.status == 2){
                return '已读'
            }
        }
    },
    {
        key: 'createTime',
        title: '接收时间',
        width: 120
    }
])

const searchParams = ref({})
const getList = () => {
    searchParams.value.pageSize = pageSize.value
    searchParams.value.pageNum = currentPage.value
    getMailboxs(searchParams.value).then(res => {
        if(res.code == 200){
            data.value = res.data.records
            totalRow.value = res.data.totalRow
        }
    })
}
const search = () => {
    getList()
}

getList()


// 查看邮件
const isEdit = ref(false)
const editItem = ref({})
const edit = (item) => {
    const data = {
        id: item.id
    }
    getMailbox(data).then(res => {
        if(res.code == 200){
            isEdit.value = true
            editItem.value = res.data
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}
</script>


<style scoped>

</style>